<template>
  <div style="max-width: 600px; padding-right: 20px; margin: 20px auto">
    <div
      style="text-align: center; font-size: 18px; font-weight: 700; margin-bottom: 10px"
    >
      {{ actionTitle }}
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      size="small"
      status-icon
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="ruleForm.content" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="Activity zone">
          <el-option label="待办" :value="0" />
          <el-option label="完成" :value="1" />
          <el-option label="删除" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="start_time" required>
        <el-date-picker
          v-model="ruleForm.start_time"
          type="datetime"
          placeholder="开始时间"
          style="width: 100%"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="expire_time" required>
        <el-date-picker
          v-model="ruleForm.expire_time"
          type="datetime"
          placeholder="结束时间"
          style="width: 100%"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="是否重要" prop="is_major">
        <el-radio-group v-model="ruleForm.is_major">
          <el-radio :label="0">不重要</el-radio>
          <el-radio :label="1">重要</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 提 交 </el-button>
        <el-button @click="cancelForm(ruleFormRef)">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="ActionTask">
import type { Task } from "@/api/interface/index.ts";
import type { FormInstance, FormRules } from "element-plus";
import { dayjs } from "element-plus";
import { reactive, ref, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { reqInsertTask, reqUpdateTask } from "@/api/task";

const router = useRouter();
const route = useRoute();

// export interface Props {
//   title: string;
// }
// const props = withDefaults(defineProps<Props>(), {
//   title: "add"
// });

const ruleFormRef = ref<FormInstance>();
let ruleForm = reactive<Task.TaskItem>({
  title: "",
  content: "",
  status: 0,
  is_major: 1,
  start_time: "",
  expire_time: ""
});

const actionTitle = computed(() => {
  if (route.query.title == "edit") {
    let row = JSON.parse(route.query.row as string);
    // ruleForm = reactive<Task.TaskItem>({
    //   ...row,
    //   start_time: dayjs(row.start_time).format("YYYY-MM-DD HH:mm:ss"),
    //   expire_time: dayjs(row.expire_time).format("YYYY-MM-DD HH:mm:ss")
    // });
    Object.assign(ruleForm, row, {
      start_time: dayjs(row.start_time).format("YYYY-MM-DD HH:mm:ss"),
      expire_time: dayjs(row.expire_time).format("YYYY-MM-DD HH:mm:ss")
    });
  }
  return route.query.title == "add" ? "添加任务" : "编辑任务";
});

const rules = reactive<FormRules<Task.TaskItem>>({
  title: [
    {
      required: true,
      message: "任务标题不能为空",
      trigger: "change"
    }
  ],
  content: [
    {
      required: true,
      message: "任务内容不能为空",
      trigger: "change"
    }
  ],
  status: [
    {
      required: true,
      message: "任务状态不能为空",
      trigger: "change"
    }
  ],
  is_major: [
    {
      required: true,
      message: "是否重要不能为空",
      trigger: "change"
    }
  ],
  start_time: [
    {
      type: "date",
      required: true,
      message: "开始时间不能为空",
      trigger: "change"
    }
  ],
  expire_time: [
    {
      type: "date",
      required: true,
      message: "结束时间不能为空",
      trigger: "change"
    }
  ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        if (route.query.title == "edit") {
          await reqUpdateTask({ ...ruleForm, id: Number(route.query.id) });
          ElMessage.success("编辑成功");
        } else if (route.query.title == "add") {
          await reqInsertTask(ruleForm);
          ElMessage.success("添加成功");
        }
        router.back();
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const cancelForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.back();
};
</script>
